<script setup>
import {defineComponent, ref} from "vue";
import {get} from "../../../util/request.js";
import {showToast} from "vant";

defineProps({
  url:{
    type: String,
    default: 'default value',
    required: true
  },
  params:Object
});
const listings = ref([
]);
const loading = ref(false);
const finished = ref(false);
const pagNum = ref(1)
const pagSize = ref(10)
const onLoad = (url,params) => {
  params.pagNum = pagNum.value;
  params.pagSize = pagSize.value;
  // 异步更新数据
  setTimeout(() => {
    get(url,params).then(res => {
      if (res.code === 0){
        pagNum.value++;
        loading.value = false;
        if(res.data.length !== 0){
          for (let i = 0; i < res.data.length; i++) {
            listings.value.push(res.data[i])
          }
        } else {
          finished.value = true;
        }
      } else {
        showToast(res.data);
        finished.value = true;
        loading.value = false;
      }
    }).catch(()=>{
      loading.value = false;
      finished.value = true;
      showToast("网络错误")
    })
  }, 200);
};

</script>

<template>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad(url,params)"
  >
    <van-cell v-for="item in listings" @click="() => {$router.push({path:'/houseInfo',query:{id:item.listingId}})}">
      <van-row>
        <van-col span="8" >
            <van-image width="100px" height="100px" :src="item.cover" />
        </van-col>
        <van-col span="16">
          <div style="margin-left: 10px;color: #1a1a1a">
            <div style="font-size: 14px;text-align: left">
              {{item.description}}
            </div>
            <div class="listPrice">
              {{item.price}}元/月
            </div>
          </div>
        </van-col>
      </van-row>
    </van-cell>
  </van-list>
</template>

<style scoped>

.listPrice {
  font-size: 15px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0; /* 可选，但如果你想要文本靠右，应该设置这个值 */
  padding: 5px; /* 添加一些内边距使文本不紧贴容器底部和右侧 */
}


</style>